<!-- 方案部署 -->
<template>
    <div class="mainContent">
        <div class="flex-right-item">
            <navigationBarCustom customTitle="方案部署">
                <div class="searchContent">
                    <el-input
                        v-model="planName"
                        placeholder="请输入方案名称"
                        size="mini"
                        style="width: 150px; margin-right: 10px"
                    ></el-input>
                    <el-date-picker
                        v-model="rangeDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="margin-right: 10px"
                    >
                    </el-date-picker>
                    <el-input v-model="userName" placeholder="请输入操作者" size="mini" style="width: 150px; margin-right: 10px"></el-input>
                    <custom-button type="search" style="margin-right: 10px" @searchClick="searchClick"></custom-button>
                    <custom-button type="reset" style="margin-right: 10px" @resetClick="resetClick"></custom-button>
                </div>
            </navigationBarCustom>

            <div style="margin-top: 10px">
                <tableHeightIndex
                    :dataSource="dataSource"
                    :tableColumns="tableColumns"
                    :btnList="btnList"
                    :pageSize="pageSize"
                    :pageCount="pageCount"
                    :pageNo="pageNo"
                    @pageChange="pageChange"
                    @editRow="editTableRow"
                    @viewRow="viewRow"
                    @deleteRow="deleteTableRow"
                    btnListWidth="60"
                    :selection="false"
                    :height="400"
                    @handleClickTableRow="handleTableClickTableRow"
                ></tableHeightIndex>
            </div>
        </div>
        <div class="flex-right-item" style="margin-top: 10px">
            <div class="title">办公室用电时段分合闸控制明细表</div>
            <tableIndex
                :dataSource="dataSourceDetail"
                :tableColumns="tableColumnsDetail"
                :btnList="btnFixedList"
                :pageSize="pageSize"
                :pageCount="pageCount"
                :pageNo="pageNo"
                @pageChange="pageChange"
                @editRow="editRow"
                @viewRow="viewRow"
                @deleteRow="deleteFixedRow"
                btnListWidth="60"
                :height="secondTableHeight"
            ></tableIndex>
        </div>
    </div>
</template>

<script>
import tableIndex from '@/components/customComponents/customeTable/tableHeight.vue'
import tableHeightIndex from '@/components/customComponents/customeTable/tableHeightIndex.vue'
import customButton from '@/components/customComponents/customForm/customButton'
import navigationBarCustom from '@/components/customComponents/managementCenter/navigationBarCustom.vue'
import {bsTableOne, bsTableTwo} from '@/mockData/controlCenter'

export default {
    name: 'planDeployment',
    components: {
        tableHeightIndex,
        navigationBarCustom,
        customButton,
        tableIndex
    },
    data() {
        return {
            planName: '',
            userName: '',
            rangeDate: '',
            secondTableHeight: document.body.clientHeight - 685,
            // table 相关参数  begin
            dataSource: bsTableOne,
            dataSourceDetail: bsTableTwo,
            tableColumns: [
                {
                    prop: 'bssj',
                    label: '部署时间'
                },
                {
                    prop: 'famc',
                    label: '方案名称'
                },
                {
                    prop: 'gnx',
                    label: '功能项'
                },
                {
                    prop: 'cscccs',
                    label: '超时重抄次数'
                },
                {
                    prop: 'dsms',
                    label: '定时描述'
                },
                {
                    prop: 'xcyxsj',
                    label: '下次运行时间'
                },
                {
                    prop: 'qjds',
                    label: '全局定时'
                },
                {
                    prop: 'syqk',
                    label: '使用情况'
                },
                {
                    prop: 'zjyccs',
                    label: '最近异常次数'
                }
            ],
            tableColumnsDetail: [
                // {
                // 	prop: "TableName",
                // 	label: "序号",
                // },
                {
                    prop: 'cjqbh',
                    label: '采集器编号'
                },
                {
                    prop: 'txdz',
                    label: '通讯地址'
                },
                {
                    prop: 'yh',
                    label: '用户'
                },
                {
                    prop: 'dssz',
                    label: '定时设置'
                },
                {
                    prop: 'xczxsj',
                    label: '下次执行时间'
                },
                {
                    prop: 'cjsj',
                    label: '创建时间'
                },
                {
                    prop: 'dqzt',
                    label: '当前状态'
                },
                {
                    prop: 'sczxjg',
                    label: '上次执行结果'
                }
            ],
            btnList: ['delete'],
            btnFixedList: ['delete'],
            pageSize: 20,
            pageCount: 100,
            pageNo: 1
        }
    },
    computed: {},
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'))
            }, 500)
        })
    },
    created() {},
    methods: {
        handleTableClickTableRow(d) {
            console.log(d)
            //   this.tableItem = d;
            //   this.customTitle = `关联固定表【${d.TableName}】`;
            //   this.initDownYzzd();
        },
        deleteTableRow(d) {
            console.log(d)
        },
        deleteFixedRow(d) {
            console.log(d)
        },

        viewRow(d) {
            console.log(d)
        },
        editTableRow(d) {
            console.log(d)
        },
        editRow(d) {
            console.log(d)
        },
        // 分页点击事件
        pageChange(p) {
            this.pageNo = p
            //   this.initPage();
        },
        searchClick() {
            this.pageNo = 1
            // this.initPage()
        },
        resetClick() {
            this.planName = ''
            this.userName = ''
            this.rangeDate = ''
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    width: 100%;
}
.flex-right-item {
    width: 100%;
    text-align: right;
}
.title {
    background: #f2f2f2;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-bottom: 10px;
}
</style>
